<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>维修报修</title>
    <link href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-container" style="margin-top: 30px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">业主姓名</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-verify="required" name="ownerName" placeholder="系统自动填充"
                       readonly required type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">楼号</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-verify="required" name="buildingNumber" placeholder="系统自动填充"
                       readonly required type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">单元号</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-verify="required" name="unitNumber" placeholder="系统自动填充"
                       readonly required type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">门牌号</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-verify="required" name="roomNumber" placeholder="系统自动填充"
                       readonly required type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">维修项目</label>
            <div class="layui-input-block">
                <select lay-verify="required" name="repairType">
                    <option value="">请选择维修项目</option>
                    <option value="水电维修">水电维修</option>
                    <option value="门窗维修">门窗维修</option>
                    <option value="电梯维修">电梯维修</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">期望时间</label>
            <div class="layui-input-block">
                <input class="layui-input" id="repairTime" lay-verify="required"
                       name="repairTime" placeholder="请选择期望维修时间"
                       type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="formSubmit" lay-submit>提交工单</button>
            </div>
        </div>
    </form>
</div>

<script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
<script>
    layui.use(['form', 'jquery', 'laydate'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var laydate = layui.laydate;

        let buildingId;
        // 获取业主信息并填充表单
        $.ajax({
            url: '/owner/id',
            type: 'post',
            data: {id: sessionStorage.getItem("userId")},
            success: function (data) {
                if (data.code === 200) {
                    $('input[name="ownerName"]').val(data.data.name);
                    $('input[name="buildingNumber"]').val(data.data.buildingName);
                    $('input[name="unitNumber"]').val(data.data.unitName);
                    $('input[name="roomNumber"]').val(data.data.houseName);
                    buildingId = data.data.buildingId;
                    form.render();
                }
            }
        });

        // 初始化日期时间选择器
        laydate.render({
            elem: '#repairTime',
            type: 'datetime',
            min: 0, // 限制最小日期为今天
            format: 'yyyy-MM-dd HH:mm',
            btns: ['confirm'],
            ready: function (date) {
                // 初始化时设置时间为当前整点或半点
                var now = new Date();
                var minutes = now.getMinutes() < 30 ? '00' : '30';
                this.setValue(laydate.util.toDateString(now, 'yyyy-MM-dd ') +
                    now.getHours() + ':' + minutes);
            },
            change: function (value, date, endDate) {
                // 限制只能选择整点或半点
                var minutes = date.minutes;
                if (minutes !== 0 && minutes !== 30) {
                    layer.msg('请选择整点或半点时间');
                    this.setValue(laydate.util.toDateString(date, 'yyyy-MM-dd ') +
                        date.hours + ':' + (minutes < 30 ? '00' : '30'));
                }
            }
        });

        // 监听提交
        form.on('submit(formSubmit)', function (data) {
            /*            console.log(data.field)
                        console.log(JSON.stringify({
                            ownerId: parseInt(sessionStorage.getItem("userId")), // 转为整数
                            faultDesc: data.field.repairType,
                            buildingId: parseInt(buildingId), // 转为整数
                            repairTime: new Date(data.field.repairTime).toISOString(), // 需要后端处理字符串转Date
                            status: 0
                        }))*/
            $.ajax({
                type: 'post',
                url: '/maintenance/add',
                contentType: 'application/json',
                data: JSON.stringify({
                    ownerId: parseInt(sessionStorage.getItem("userId")), // 转为整数
                    faultDesc: data.field.repairType,
                    buildingId: parseInt(buildingId), // 转为整数
                    repairTime: new Date(data.field.repairTime).toISOString(), // 需要后端处理字符串转Date
                    status: 0
                }),
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
